<template>
  <div>
    <!-- 搜索栏 -->
    <el-row style="margin-top: 15px;">
      <span style="margin-top: 10px;margin-left: 15px;margin-top: 25px;font-size: 14px;">车牌号码：</span>
      <el-input size="mini" placeholder="请输入车牌号码" style="width: 220px; margin-right: 10px;" />
      <span style="margin-top: 10px;margin-left: 15px;margin-top: 25px;font-size: 14px;">缴纳状态：</span>
      <el-select size="mini" placeholder="未选择" style="width: 220px; margin-right: 10px;">
        <el-option label="全部" value="" />
        <el-option label="代缴纳" value="" />
        <el-option label="已缴纳" value="" />
      </el-select>
      <el-button type="primary" size="mini" style="border-radius: 5px;">查询</el-button>
    </el-row>

    <!-- 表格 -->
    <el-table :data="list" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="index" label="序号" width="50" />
      <el-table-column prop="carNumber" label="车牌号码" />
      <el-table-column prop="chargeType" label="收费类型" />
      <el-table-column prop="parkingTime" label="停车总时长" />
      <el-table-column prop="actualCharge" label="缴纳费用 (元)" />
      <el-table-column prop="paymentStatus" label="缴纳状态" />
      <el-table-column prop="paymentMethod" label="缴纳方式">
        <template slot-scope="scope">
          <span v-if="scope.row.paymentMethod === 'Alipay'">支付宝</span>
          <span v-else-if="scope.row.paymentMethod === 'WeChat'">微信</span>
          <span v-else-if="scope.row.paymentMethod === 'Cash'">线下</span>
        </template>
      </el-table-column>
      <el-table-column prop="paymentTime" label="缴纳时间" />
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        :page-sizes="[10,20,50,100]"
        :page-size="pageParams.pagesize"
        :current-page="pageParams.page"
        :total="pageParams.total"
        layout="total, prev, pager, next, sizes, jumper"
        @current-change="changePage"
        @size-change="changecurrent"
      />
    </el-row>
  </div>
</template>
<script>
import { getPaymentListAPI } from '@/api'

export default {
  name: 'PaymentManagement',
  data() {
    return {
      loading: false,
      pageParams: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      list: []
    }
  },
  created() {
    this.getPaymentList()
  },
  methods: {
    async changePage(newPage) {
      this.loading = true
      this.pageParams.page = newPage // 赋值当前页码
      await this.getPaymentList()
      this.loading = false
    },
    async changecurrent(newcurrent) {
      this.loading = true
      this.pageParams.pagesize = newcurrent
      await this.getPaymentList()
      this.loading = false
    },
    async getPaymentList() {
      this.loading = true
      const { rows, total } = await getPaymentListAPI(this.pageParams)
      this.list = rows
      this.pageParams.total = total
      this.loading = false
    }
  }
}
</script>
